import React, { useEffect } from 'react';
import { Button, Flex, Form, Input, Select, Space, message } from 'antd';
import request from '@/utils/request'
import { Card } from 'antd';
import {useDispatch,useSelector} from 'react-redux'
import { fetchLogin } from '@/store/modules/user.js';
import { fetchChanelList } from '@/store/modules/channelStore';
import {useNavigate} from 'react-router-dom'
import './index.scss'

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = { 
  wrapperCol: { offset: 8, span: 16 },
};

// interface LoginItem{
//   mobile:number,
//   code:number
// }

const App= () => {
  const dispath= useDispatch()
  const navigate=useNavigate()
  const {token} =useSelector(state=>state.user)
  useEffect(()=>{
   const fetchData =async()=>{
    request('/channels','get').then(res=>{
      console.log(res,'res')
    })
   }
   fetchData()
  },[])

  const [form] = Form.useForm();
  const onFinish = async(values) => {
    // 这里用async 和await 这样就会等dispath有结果了才会执行下面的
   await dispath(fetchLogin(values))
    // 1.跳转
    navigate('/')
    // 2.提示
    message.success('登录成功')
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({ mobile: '13800000001', code: '246810' });
  };

  return (
    
    <div className='login-content'>
    <Card style={{ width: 600}}>
    <Form
      {...layout}
      form={form}
      name="control-hooks"
      onFinish={onFinish}
      style={{ maxWidth: 600 }}
    >
      <div className='login-center'></div>
      <Form.Item name="mobile" label="手机号"  rules={[{ required: true, message: '请您输入手机号' }]}>
        <Input />
      </Form.Item>
      <Form.Item name="code" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
      <Input />
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
      >
        {({ getFieldValue }) =>
          getFieldValue('code') === 'other' ? (
            <Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>
              <Input />
            </Form.Item>
          ) : null
        }
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Space>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
          <Button htmlType="button" onClick={onReset}>
            Reset
          </Button>
          <Button type="link" htmlType="button" onClick={onFill}>
            Fill form
          </Button>
        </Space>
      </Form.Item>
    </Form>
    </Card>
    </div>

  );
};

export default App;